*{margin:0;padding:0}
.App {
  width: 100%;
  height: 100%;
}
/*logo动画*/
.App-logo {
  margin-top: 1vmin;
  margin-left: 3vmin;
  height: 4vmin;
}
.App-logo2{
  position: absolute;
  top: 4vmin;
  left: 4.1vmin;
  height: 1vmin;
}
@media (prefers-reduced-motion: no-preference) {
  .App-logo2{
    animation: App-logo2-spin infinite 2s 0s linear;
  }
  .App-logo {
    animation: App-logo-spin infinite 2s 0s linear;
  }
}
@keyframes App-logo-spin {
  0%,75% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(20deg) translateX(-0.8vmin);
  }
  85% {
    transform: rotate(-20deg) translateX(0.8vmin);
  }
  90% {
    transform: rotate(20deg) translateX(-0.8vmin);
  }
  95% {
    transform: rotate(-20deg) translateX(0.8vmin);
  }
  100% {
    transform: rotate(20deg) translateX(-0.8vmin);
  }
}
@keyframes App-logo2-spin {
  30% {
    transform: rotate(20deg) translateX(-0.3vmin);
  }
  80% {
    transform: rotate(-20deg) translateX(0.3vmin);
  }
  85% {
    transform: rotate(20deg) translateX(-0.3vmin);
  }
  90% {
    transform: rotate(-20deg) translateX(0.3vmin);
  }
  95% {
    transform: rotate(20deg) translateX(-0.3vmin);
  }
  100% {
    transform: rotate(-20deg) translateX(0.3vmin);
  }
}
/*logo动画结束*/
.App-header {
  position: relative;
  height: 6vmin;
  display: flex;
  justify-content: left;
  font-size: calc(10px + 2vmin);
  color: var(--white);
  background-color: var(--black-blue-01);
}
.logo-box,.navMeun{
  width: 10vw;
  min-width: 24vmin;
  height: 100%;
}
.logo-box{
  display: flex;
}
.logo-box>div{
  line-height: 6vmin;
  font-size: 3vmin;
}
.viceNav,.mainContent{
  width: 90vw;
  height: 100%;
  background: var(--white);
}
.App-header>p{
  
  pointer-events: none;
}
.App>section{
  display: flex;
  justify-content: left;
  height: calc(100vh - 6vmin);
}
.App>section>section{
  height: 100%;
}

.navMeun{
  background-color: var(--blue-01);
}
.mainContent{
  background-color: var(--blue-02);
}